<template>
  <view class="announcement-page">
    <!-- 标题 -->
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏主体 -->
    <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧返回按钮 -->
      <image style="height: 30rpx; width: 30rpx;" src="/static/images/ic_back.png" @click="handleBack"></image>

      <!-- 中间标题 -->
      <text class="title">公告详情</text>

    </view>
    <view style="padding: 32rpx 24rpx;">
      <view style="font-size: 28rpx; font-weight: bold; color: black;">{{article.title}}</view>
      <view style="margin-top: 24rpx; margin-bottom: 40rpx; height: 2rpx; background-color: #E8E8E8;"></view>
      <view v-if="article && article.content" class="paragraph" v-html="processedHtml(article.content)"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articleId: null,
      article: null,
      appConfig: null,
      statusBarHeight: 20, // 默认状态栏高度
      navBarHeight: 44, // 默认导航栏高度
    };
  },
  created() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    //获取状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight

    // 微信小程序适配
    // #ifdef MP-WEIXIN
    const menuRect = uni.getMenuButtonBoundingClientRect()
    this.navBarHeight = (menuRect.top - systemInfo.statusBarHeight) * 2 + menuRect.height
    this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离[6](@ref)
    // #endif
  },
  onLoad(options) {
    if (options) {
      this.articleId = options.id
    }
    this.getParagraph()
  },
  methods: {
    async getParagraph() {
      const res = await this.$http({
        method: 'GET',
        url: `/article/details/${this.articleId}`
      })
      this.article = res.data
    },
    processedHtml(vl) {
      // 添加行内样式 line-height
      return vl.replace(/<(\w+)([^>]*)>/g, (match, tag, attrs) => {
        // 1. 先添加行高
        const styleMatch = attrs.match(/style\s*=\s*["']([^"']*)["']/i);
        let existingStyle = styleMatch ? styleMatch[1] : '';
        existingStyle += ";line-height:1.5;"; // 保留原行高设置

        // 2. 针对图片标签添加宽度自适应
        if (tag.toLowerCase() === "img") {
          existingStyle += "width:100%!important;max-width:100vw!important;height:auto!important;display:block;";
        }

        const newStyle = `style="${existingStyle}"`;
        return styleMatch ?
            match.replace(styleMatch[0], newStyle) :
            `<${tag} ${newStyle}${attrs}>`;
      });
    },
    handleBack() {
      uni.navigateBack() // 返回逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
.announcement-page {
  padding: 40rpx;
}

/* 状态栏占位 */
.status-bar {
  width: 100%;
  background-color: #FFFFFF;//与导航栏同色
}

/* 标题样式 */
.title {
  font-size: 28rpx;
  color: #000;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 导航栏主体 */
.nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  position: relative;
}

.paragraph {
  font-size: 28rpx;
  color: #000;
}
</style>